<template>
  <div class="homeCom">
    <el-carousel trigger="click">
      <el-carousel-item v-for="(item, index) in banner" :key="index">
        <!-- <img src="@/assets/image/banner.png" /> -->
        <img :src="item.image" />
      </el-carousel-item>
    </el-carousel>
    <div class="content">
      <div class="title">
        统计分析数据
      </div>
      <!-- <div class="echarts"> -->
      <div class="cont">
        <div id="main1"></div>
        <div class="text">墓室藏品年代分析</div>
      </div>
      <div class="cont">
        <div id="main2"></div>
        <div class="text">墓室藏品质地分析</div>
      </div>
      <div class="cont">
        <div id="main3"></div>
        <div class="text">墓室藏品级别分析</div>
      </div>
      <!-- </div> -->
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { bannerList, indexStatistics } from '@/api/home'
export default {
  data() {
    return {
      option: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ],
        color: ['#A2754C'],
        textStyle: {
          color: '#683C19'
        }
      },
      option2: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'bar'
          }
        ],
        color: ['#EACFA5'],
        textStyle: {
          color: '#683C19'
        }
      },
      option3: {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '墓室藏品级别分析',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        color: ["#6B4626", '#FFEBBA', "#A2754C", "#EACFA5"],
      },
      banner: []
    };
  },
  created() {
    this.bannerList()
    this.indexStatistics()
  },
  methods: {
    bannerList() {
      bannerList().then(res => {
        console.log(res);
        this.banner = res.data
      }).catch(e => {
        console.log(e);
      })
    },
    indexStatistics() {
      indexStatistics().then(res => {
        console.log(res);
        this.option.xAxis.data = []
        this.option.series[0].data = []
        res.data.dynasty_data.forEach(item => {
          this.option.xAxis.data.push(item.name)
          this.option.series[0].data.push(item.collection_total)
        })
        this.option2.xAxis.data = []
        this.option2.series[0].data = []
        res.data.texture_data.forEach(item => {
          this.option2.xAxis.data.push(item.name)
          this.option2.series[0].data.push(item.collection_total)
        })
        this.option3.series[0].data = []
        res.data.storeroom_data.forEach(item => {
          this.option3.series[0].data.push({
            value: item.collection_total,
            name: item.name
          })
        })
        this.$nextTick(() => {
          var chartDom = document.getElementById('main1');
          var myChart = echarts.init(chartDom);
          myChart.setOption(this.option)
          var chartDom2 = document.getElementById('main2');
          var myChart2 = echarts.init(chartDom2);
          myChart2.setOption(this.option2)
          var chartDom3 = document.getElementById('main3');
          var myChart3 = echarts.init(chartDom3);
          myChart3.setOption(this.option3)
        })
      }).catch(e => {
        console.log(e);
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.homeCom {
  .el-carousel {
    height: 30vw;
    min-height: 310px;
    /deep/ .el-carousel__container {
      height: 30vw;
      min-height: 310px;
    }

    img {
      width: 100%;
    }
  }

  .content {
    width: 1000px;
    margin: 0 auto;
    padding: 40px 0;

    .title {
      font-size: 18px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #683C19;
      text-align: left;
    }

    // .echarts {
    //   display: flex;
    //   justify-content: space-between;
    //   margin-top: 20px;

    .cont {
      background: #fff;
      border-radius: 18px;
      // width: 300px;
      width: 100%;
      padding: 10px;
      margin: 10px 0;

      #main1,
      #main2,
      #main3 {
        width: 100%;
        height: 400px;
      }

      .text {
        font-size: 16px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #683C19;
      }

      // }
    }
  }
}
</style>
